<template>
  <div v-if="itemList.length !== 0">
<div v-show="statisticsVisible">
      <div class="zmn-cardBox dib" v-for="(item,index) in itemList" :key="index">
        <div class="zmn-cardBox-title">{{item.title}}</div>
        <div class="zmn-cardBox-value">{{item.value || '--'}}</div>
      </div>
      <div class="zmn-cardBox dib pointer" @click="addData" v-if="selfVisible">
        <div class="zmn-cardBox-title text-primary">+</div>
        <div class="zmn-cardBox-value">自定义</div>
      </div>
    </div>
    <div class="tc fs12 text-primary mb20" @click="showStatistics">
      <a href="javascript:void(0);">
        {{statisticsVisible?'收起':'展开'}}统计
        <i :class="statisticsVisible ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"></i>
      </a>
    </div>
    <add-self v-model="addDataVisible" :api-get="apiGet" :api-submit="apiSubmit" @after-save="afterSave"></add-self>
  </div>
</template>
<script>
import addSelf from './addSelf'
export default {
  components: { addSelf },
  props: {
    itemList: {
      type: Array,
      default: () => { }
    },
    selfVisible: {
      type: Boolean,
      default: false
    },
    apiGet: {
      type: Function,
      default: () => { }
    },
    apiSubmit: {
      type: Function,
      default: () => { }
    },
    params: { // 请求参数
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      statisticsVisible: true,
      addDataVisible: false
    }
  },
  methods: {
    showStatistics () {
      this.statisticsVisible = !this.statisticsVisible
    },
    addData () {
      this.addDataVisible = true
    },
    afterSave () {
      this.addDataVisible = false
      this.$emit('after-load', true)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '~@/styles/variables.scss';

.zmn-cardBox {
  background: #f7f7f7;
  margin: 0 20px 20px 0;
  &-title {
    width: 180px;
    height: 40px;
    padding: 20px 0;
    margin: 0 auto;
    text-align: center;
    font-size: 16px;
  }
  &-value {
    width: 180px;
    text-align: center;
    margin: 20px;
    color: $theme-primary;
    font-size: 24px;
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //溢出用省略号显示
    white-space: nowrap; //溢出不换行
  }
}
</style>
